<template>
  <div class="container">
    <CardBox title="物种介绍"></CardBox>
    <div class="content-container">
      <div class="intro-box">
        <div class="intro-img">
<!--          <img class="species-img" :src=imgUrl+species.photo :alt=species.name />-->
          <el-carousel
                  class="image-swiper"
                  :interval="5000"
                  height="360px"
                  arrow="always">
            <el-carousel-item v-for="(a, $i) in images" :key="$i">
              <el-image
                      style="width: 100%; height: 360px"
                      :src="a.url"
                      :preview-src-list="images.map(v => v.url)"
                      :initial-index="$i"
                      :fit="'cover'">
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="intro-info">
          <div class="intro-title">{{species.name}}</div>
          <div style="font-style: italic;" class="intro-latin">({{species.latin}})</div>
          <div class="intro-desc">
            {{species.description}}
          </div>
        </div>
      </div>
      <div class="intro-tags">
        <span class="intro-tag">{{species.family}}</span>
        <span class="intro-tag">{{species.genus}}</span>
        <span class="intro-tag">{{species.name}}</span>
        <span style="font-style: italic;" class="intro-tag">{{species.latin}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
export default {
  name: "SpeciesIntroduction",
  inject: ['imgUrl'], // 注入公共变量
  components: {
    CardBox,
  },
  data() {
    return {
      images:[],
      species:null
    };
  },
  created() {
    EventBus.$on('select-species', (message) => {
      while (this.images.length){
        this.images.pop();
      }
      if (message.photo) {
        var ids = message.photo.split(",");
        for (let i = 0; i < ids.length; i++) {
          this.images.push({ url: this.imgUrl.replace('XY?mw=500&mh=500&','?') + ids[i] });
        }
      }
      this.species=message;
    })
  },
};
</script>

<style lang="scss" scoped>
  .introduction-img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
    object-fit: fill;
  }

  .image-swiper {
    width: 100%;
    height: 360px;
    margin: 0 auto;
    display: block;
    object-fit: cover;
  }

.container {
  margin-bottom: 20px;
}
.content-container {
  padding: 12px;
  height: 404px;
}
.intro-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 13px;
  .intro-img {
    width: 268px;
    height: 337px;
  }
  .species-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .intro-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
    .intro-title {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 14px;
      text-align: center;
      &::before {
        content: "";
        display: inline-block;
        width: 191px;
        height: 1px;
        background: url("@/assets/img/species-line.png") no-repeat center center;
        position: relative;
        top: -10px;
      }
    }
    .intro-latin {
      font-size: 14px;
      color: #ccc;
      margin-bottom: 16px;
      text-align: center;
      &::after {
        content: "";
        display: inline-block;
        width: 191px;
        height: 1px;
        background: url("@/assets/img/species-line.png") no-repeat center center;
      }
    }
    .intro-desc {
      max-height: 300px; /* 限制最大高度 */
      overflow: hidden; /* 隐藏超出部分 */
      display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-line-clamp: 10; /* 限制在一个块元素显示的文本的行数 */
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      font-size: 14px;
      color: #fff;
    }
  }
}

.intro-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 30px;
}
.intro-tag {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  background: url("@/assets/img/species-intro-bg.png") no-repeat center center;
  background-size: 100% 28px;
  transition: background 0.2s;
  height: 28px;
  line-height: 28px;
  padding: 0 15px;
  position: relative;
}
</style>
